<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试1</title>
    <script src="js\node_modules\jquery\dist\jquery.js"></script>
    <link rel="stylesheet" href="styles/common.css"/>
</head>
<body>
<div>
    <table class="listtable">
        <caption>所有部门:</caption>
        <tr class="listheader">
            <th>部门编号</th>
            <th>部门名称</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td id="search-input1" contenteditable="false">管理部</td>
            <td>
                <a class="clickbutton1">编辑</a>
                <a class="clickbutton2">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td id="search-input2" contenteditable="true">技术部</td>
            <td>
                <a class="clickbutton1">编辑</a>
                <a class="clickbutton2">删除</a>
            </td>
        </tr>
    </table>
</div>

<script>
    let $clickbutton1 = $(".clickbutton1");
    console.log($clickbutton1.length);
    let len = $clickbutton1.length;
    for (let i = 0; i < len; i++) {
        $clickbutton1[i].onclick = ()=>{
            console.log("单击了编辑按钮");
            $("#search-input1").attr("contenteditable", true);
        }
    }
</script>
</body>
</html>